<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { getUserPage, modifyUserInfo, createUserInfo } from "/@/api/user";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
import CustomerInfo from "./components/CustomerInfo.vue";
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";
dayjs.extend(utc);
dayjs.extend(timezone);

defineOptions({
  name: "AccountIndex"
});

const dialogVisible = ref<boolean>(false);
const tableData = ref([]);
const query = reactive({ currentPage: 1, pageSize: 15, type: 2 });
const total = ref(0);
const formData = ref({
  username: "",
  password: "",
  role: "",
  desc: ""
});
const title = ref("");
const type = ref(1); // 1 创建 2 编辑

onMounted(() => {
  getTableData();
});

const getTableData = () => {
  getUserPage(query).then((res: any) => {
    res.data.data.forEach(item => {
      item.amount = Number(item.amount);
      item.quota = Number(item.quota);
      item.used_quota = Number(item.used_quota);
    });
    tableData.value = res.data.data;
    total.value = res.data.total;
  });
};

const handleSizeChange = val => {
  query.pageSize = val;
  getTableData();
};

const handleCurrentChange = val => {
  query.currentPage = val;
  getTableData();
};

const editCustomer = row => {
  title.value = "修改账户信息";
  type.value = 2;
  formData.value = JSON.parse(JSON.stringify(row));
  dialogVisible.value = true;
};

const create = () => {
  title.value = "创建账户信息";
  type.value = 1;
  formData.value = {
    username: "",
    password: "",
    role: "",
    desc: ""
  };
  dialogVisible.value = true;
};

const submitForm = val => {
  const asyncFn = type.value === 1 ? createUserInfo : modifyUserInfo;
  asyncFn(val).then(() => {
    ElMessage({
      type: "success",
      message: "操作成功"
    });
    dialogVisible.value = false;
    getTableData();
  });
};

const filterRole = val => {
  if (val === "admin" || val === "super") {
    return "管理员";
  } else if (val === "user") {
    return "用户方";
  } else if (val === "warehouse") {
    return "仓库方";
  } else if (val === "customer") {
    return "顾客";
  } else {
    return "";
  }
};
</script>

<template>
  <div class="account-warp">
    <el-card>
      <el-button type="primary" @click="create">创 建</el-button>
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column prop="account" label="账户名" />
        <el-table-column prop="role" label="权限">
          <template #default="{ row }">
            {{ filterRole(row.role) }}
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="描述" />
        <el-table-column label="创建时间(加利福尼亚)">
          <template #default="{ row }">
            {{
              row.created_at
                ? dayjs(row.created_at * 1000)
                    .tz("America/Los_Angeles")
                    .format("YYYY-MM-DD HH:mm:ss")
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="更新时间(加利福尼亚)">
          <template #default="{ row }">
            {{
              row.updated_at
                ? dayjs(row.updated_at * 1000)
                    .tz("America/Los_Angeles")
                    .format("YYYY-MM-DD HH:mm:ss")
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" @click="editCustomer(row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-pagination
          v-model:currentPage="query.currentPage"
          v-model:page-size="query.pageSize"
          :page-sizes="[5, 10, 15, 20, 30]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(total)"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <CustomerInfo
      v-model="dialogVisible"
      :form-data="formData"
      :title="title"
      :type="type"
      @submit-form="submitForm"
    />
  </div>
</template>
